<template>
  <div class="home" v-loading="loading" element-loading-text="拼命登录中...">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>云课招新考试</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="open"
          >注意事项</el-button
        >
      </div>
      <el-form ref="student" :model="student" label-width="60px">
        <el-form-item label="学号：">
          <el-input v-model="student.sid" placeholder="请输入学号"></el-input>
        </el-form-item>
        <el-form-item label="语言：">
          <el-select
            v-model="student.language"
            style="width: 100%"
            placeholder="请选择语言类型"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-button
          type="primary"
          style="display: block; margin: 0 auto"
          @click="login"
          >进入考试</el-button
        >
      </el-form>
      <!-- <el-tag style="position: absolute;right: 5px;bottom: 5px;" @click="$router.push('/admin')">管理员登录</el-tag> -->
    </el-card>
    <!-- <p style="position: absolute; bottom: 10px; right: 10px;" @click="$router.push('/adminLogin')">管理员</p> -->
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  components: {},
  created() {
    this.open();
  },
  data() {
    return {
      loading: false,
      options: [
        {
          value: "Javascript",
          label: "Javascript",
        },
        {
          value: "C++",
          label: "C++",
        },
        {
          value: "Java",
          label: "Java",
        },
        {
          value: "C语言",
          label: "C语言",
        },
      ],
      student: {
        sid: "",
        // name: "",
        // grade: "",
        language: "",
      },
    };
  },
  methods: {
    open() {
      this.$alert(
        `[1].考试过程中请不要打开聊天工具和其他网页，一经发现一律记0分 \n [2].代码写完请及时提交，系统将在4点半准时关闭 \n [3].代码import/include等内容要加上 \n [4].中途页面出错请向监考人员反馈 \n [5].登录前请确认好[个人信息],以免成绩丢失 \n [6].最后确认提交时请认真检查代码，避免出错 \n [7].提交时不要着急，慢点`,
        "注意事项",
        {
          confirmButtonText: "确定",
          callback: (action) => {
            // this.$message({
            //   type: "info",
            //   message: `action: ${action}`,
            // });
          },
        }
      );
    },
    login() {
      if (this.student.language === "" || this.student.sid === "") {
        return this.$message.info("请填写好信息");
      }
      localStorage.setItem("mode", this.student.language);
      this.loading = true;
      this.$http.post("/login", { ...this.student }).then((res) => {
        console.log(res);
        if (res.data.message === "ok") {
          this.loading = false;
          this.$cookies.set("token", res.data.data);
          // this.$http.defaults.headers["Authorization"] =
          //   this.$cookies.get("token");
          console.log(this.$cookies.get("token"));
          this.$message({
            message: "登录成功",
            type: "success",
          });
          this.$router.push("/home");
        } else {
          this.loading = false;
          this.$message({
            message:
              res.data.data ?? res.data.msg + "过，需要重新登录请联系管理员",
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-message-box {
  width: 50% !important;
  white-space: pre-line;
  p {
    line-height: 36px !important;
    font-size: 26px !important;
  }
}

.home {
  background-image: linear-gradient(to bottom right, #46fca7, #3fd5fb);
  height: 100vh;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.clearfix {
  text-align: left;
}
.clearfix span {
  padding-left: 5px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
